import React, { Component } from 'react'
// import { render } from 'react-dom'
// HOC本质上是一个函数，参数为旧组件，返回一个新的组件

// 一般在组件暴露的使用调用高阶组件包裹原来的组件

const withUserName = (OldCom) => {
    return class extends Component {
        state = {
          userName: ''
        }
        changeUserName = (e) => {
          this.setState({
            userName: e.target.value
          })
        }
        render () {
          return (
            <div> 
              <input type="text" value={ this.state.userName } onChange = { this.changeUserName }/>
              <OldCom userName={ this.state.userName }/> 
            </div>
          )
        }
      }
}
class Zhangsan extends Component {
    render() {
    
        return (
          <div> 
            我是张三 { this.props.userName }
          </div>
        );
      }
}

class LiSi extends Component {
    render() {
        return (
            <div> 
              我是李四 { this.props.userName }
            </div>
          );
    }
}

const ZhangsanCom = withUserName(Zhangsan)
const LiSiCom = withUserName(LiSi)

export default class App extends Component {
    render() {
        return (
            <div>
                <ZhangsanCom/>
                <LiSiCom/>           
            </div>
        )
    }
}